<template>
	<view class="columnbox content">
		<view class="rowbox wdh-100 search-box">
			<view class="rowbox search-info spb">
				<view class="rowbox">
					<u-icon name="search" size="40rpx"></u-icon>
					<input v-model="goodsname" placeholder="搜索商品" />
				</view>
				<view class="rowbox search-btn" @click="searchGoods">搜索</view>
				<view @click="cancelSearch" v-if="searchflag"
					style="color: #949494;font-size: 28rpx;margin-right: 20rpx;">取消</view>
			</view>
		</view>
		<view class="rowbox spb scroll-content bg-co-g wdh-100 als" v-if="searchflag">
			<scroll-view scroll-y class="scroll-box-s" scroll-with-animation :scroll-into-view="typescroll">
				<view class="columnbox one-info wdh-100" v-for="(item,index) in searchList" :key="item.id">
					<view class="rowbox wdh-100 spb als">
						<image :src="item.images.split(',')[0]" mode="aspectFill" class="goods-img"></image>
						<view class="columnbox als goods-info">
							<view class="type-name">{{item.name}}
							</view>
							<view class="changjia">{{item.changjia}} </view>
							<view class="changjia">{{item.guige}}*{{item.danwei}} </view>
							<view class="rowbox wdh-100 spb" style="margin-top: 10rpx;">
								<view class="price">¥{{item.price}} </view>
								<view class="rowbox">
									<template v-if="item.num>0">
										<view @click="minusNumS(item)" class="rowbox def-bgcol add-box-minus">
											<u-icon name="minus" color="#00b6b2" size="24rpx"></u-icon>
										</view>
										<view class="goods-num">{{item.num}}</view>
									</template>
									<view class="rowbox def-bgcol add-box" @click="addNumS(item)">
										<u-icon name="plus" color="#fff" size="24rpx"></u-icon>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="rowbox spb scroll-content bg-co-g wdh-100 als" v-if="!searchflag">
			<scroll-view scroll-y class="scroll-box" scroll-with-animation :scroll-into-view="typescroll">
				<view :id="'type-'+index" class="one-type" v-for="(item,index) in infolist" :key='index'
					@click="setType(index,item)">
					<view class="rowbox type-box" :class="{'sel-type':index==curindex}">
						<!-- <image class="bg-co-g" :src="item.image" mode="aspectFill"></image> -->
						<view>{{item.name}}
						</view>
						<view class="num-box" v-if="item.num>0">{{item.num}}</view>
					</view>
				</view>
			</scroll-view>
			<scroll-view scroll-y class="scroll-box-r" scroll-with-animation :scroll-into-view="typescroll">
				<view v-if="infolist.length>0&&secondlist.length>0" class="columnbox one-info wdh-100"
					v-for="(item,index) in secondlist" :key="item.id" @click="selectType(item,index)">
					<view class="rowbox wdh-100 spb als">
						<image :src="item.images.split(',')[0]" mode="aspectFill" class="goods-img"></image>
						<view class="columnbox als goods-info">
							<view class="type-name">{{item.name}}
							</view>
							<view class="changjia">{{item.changjia}} </view>
							<view class="changjia">{{item.guige}}*{{item.danwei}} </view>
							<view class="rowbox wdh-100 spb" style="margin-top: 10rpx;">
								<view class="price">¥{{item.price}} </view>
								<view class="rowbox">
									<template v-if="item.num>0">
										<view @click="minusNum(item)" class="rowbox def-bgcol add-box-minus">
											<u-icon name="minus" color="#00b6b2" size="24rpx"></u-icon>
										</view>
										<view class="goods-num">{{item.num}}</view>
									</template>
									<view class="rowbox def-bgcol add-box" @click="addNum(item)">
										<u-icon name="plus" color="#fff" size="24rpx"></u-icon>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- <view class="wdh-100" style="height: 150rpx; "></view> -->
		<view class="rowbox wdh-100 spb submit-box">
			<view class="totalPrice">合计: <text>¥{{totalPrice}}</text> </view>
			<view class="def-bgcol rowbox submit-btn" @click="chooseType">完成添加</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				submitfalg: false,
				totalPrice: 0,
				infolist: [],
				curindex: 0,
				secondlist: [],
				selectlist: [],
				selectname: [],
				classifyids: [],
				typescroll: 'type-0',
				pageNo: 1,
				goodsname: '',
				searchflag: false,
				searchList: [],
				logo: '',
				name: '',
				userid: 0
			};
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id
				this.logo = options.logo
				this.name = options.name
				this.userid = options.userid
			}
			this.getTypeList()
		},
		methods: {
			cancelSearch() {
				this.goodsname = ''
				this.searchflag = false
			},
			searchGoods() {
				this.$req.post('/doctor/goods', {
					pageNo: 1,
					pageSize: 20,
					name: this.goodsname
				}).then(res => {
					this.searchflag = true
					res.data.data.data.forEach(resp => {
						this.infolist.forEach(t => {
							t.List.forEach(v => {
								if (v.id == resp.id) {
									resp.num = v.num
									return false
								}
							})
						})
					})
					this.searchList = res.data.data.data
				})
			},
			minusNumS(val) {
				val.num--
				this.totalPrice -= val.price * 1
				this.infolist.forEach(t => {
					t.List.forEach(v => {
						if (v.id == val.id) {
							v.num = val.num
							return false
						}
					})
				})
			},
			addNumS(val) {
				val.num++
				this.totalPrice += val.price * 1
				this.infolist.forEach(t => {
					t.List.forEach(v => {
						if (v.id == val.id) {
							v.num = val.num
							return false
						}
					})
				})
			},
			minusNum(v) {
				v.num--
				this.totalPrice -= v.price * 1
			},
			addNum(v) {
				v.num++
				this.totalPrice += v.price * 1
			},
			selectType(val, index) {
				val.selected = true
				console.log(this.infolist)
				// if (this.secondlist[index].selected) {
				// 	let arr = this.secondlist[index]
				// 	arr.selected = false
				// 	this.$set(this.secondlist, index, arr)
				// 	// let curindex = this.selectlist.indexOf(this.secondlist[index].id)
				// 	// if (curindex >= 0) {
				// 	//     this.selectlist.splice(curindex, 1)
				// 	//     this.selectname.splice(curindex, 1)
				// 	// }
				// } else {
				// 	let arr = this.secondlist[index]
				// 	arr.selected = true
				// 	this.$set(this.secondlist, index, arr)
				// }
			},
			getTypeList() {
				this.$req.post('/doctor/goodlist').then(res => {
					if (res.data.data) {
						res.data.data.forEach(resp => {
							if (resp.List) {
								resp.List.forEach(v => {
									v.num = 0
									v.selected = false
								})
							}
						})
					}
					this.infolist = res.data.data
					this.getGoodsList()
				})
			},
			getGoodsList() {
				this.secondlist = this.infolist[this.curindex].List
			},
			setType(index, v) {
				this.curindex = index
				this.goodtypeid = v.id
				this.typescroll = 'type-' + (index < 2 ? 0 : index - 1)
				this.getGoodsList()
			},
			getSelectList() {
				return new Promise(resolve => {
					let servetypeids = []
					console.log(this.infolist)
					this.infolist.forEach(res => {
						res.List.forEach(resp => {
							if (resp.num > 0) {
								resp.images = resp.images.split(',')[0]
								servetypeids.push(resp)
							}
						})
					})
					console.log('=====', servetypeids)
					resolve(servetypeids)
				})
			},
			async chooseType() {
				let servetypeids = await this.getSelectList()
				if (servetypeids.length == 0) {
					uni.showToast({
						title: '请选择商品',
						icon: 'none'
					})
					return false
				}
				if (!this.submitfalg) {
					this.submitfalg = true
					uni.showLoading({
						title: '正在保存'
					})
					// let servetypeids = []
					// this.infolist.forEach(res => {
					// 	res.List.forEach(resp => {
					// 		if (resp.selected) {
					// 			resp.images = resp.images.split(',')[0]
					// 			servetypeids.push(resp)
					// 			// servetypeids.push({
					// 			//     goodid: resp.id * 1,
					// 			//     num: resp.num * 1,
					// 			//     price: resp.price * 1,
					// 			// })
					// 		}
					// 	})
					// })
					this.submitfalg = false
					uni.hideLoading()
					uni.redirectTo({
						url: '/packageA/goods/confirmGoods?list=' + JSON.stringify(servetypeids) + '&id=' +
							this
							.id +
							'&logo=' + this.logo +
							'&name=' + this.name +
							'&userid=' + this.userid
					})
					// this.$req.post('/doctor/goodcartadd', {
					//     doctorid: uni.getStorageSync('uid'),
					//     parameter: JSON.stringify(servetypeids),
					// }).then(res => {
					//     this.submitfalg = false
					//     uni.hideLoading()
					// })
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		// height: 100vh;
		justify-content: flex-start;
		font-family: PingFang SC-Regular, PingFang SC;
		align-items: stretch;
		overflow: hidden;
	}

	.scroll-content {
		height: calc(100vh - 370rpx);
	}

	.scroll-box {
		background: #f1f1f1;
		height: 100%;
		width: 200rpx;

		.one-type {
			display: inline-block;
			width: 100%;

			.type-box {
				font-size: 28rpx;
				color: #989DAB;
				padding: 32rpx 0;
				background: #f1f1f1;
				position: relative;

				image {
					width: 90rpx;
					height: 90rpx;
					border-radius: 100rpx;
					padding: 10rpx;
					margin-bottom: 20rpx;
				}

				.num-box {
					background: #ff2917;
					color: #fff;
					font-size: 24rpx;
					padding: 10rpx 20rpx;
					border-radius: 100rpx;
					line-height: 24rpx;
					position: absolute;
					right: 0;
					transform: scale(.7);
					top: 0rpx;
				}
			}

			.sel-type {
				background: #fff;
				color: #000;
			}
		}
	}



	.one-info {
		background: #fff;
		align-items: flex-start;
		padding: 32rpx 20rpx;
		border-bottom: #f5f7f9 solid 1px;

		.type-name {
			font-size: 32rpx;
			line-height: 40rpx;
		}

		.type-price {
			margin-top: 20rpx;
			color: #989DAB;

			text {
				color: #fc1f10;
				margin-right: 10rpx;
			}
		}
	}

	.sel-icon {
		width: 40rpx;
		height: 40rpx
	}

	.submit-box {
		// position: fixed;
		// bottom: 0;
		background: #fff;
		padding: 20rpx 40rpx;
		border-top: #f1f1f1 solid 1px;
	}

	.totalPrice {
		font-size: 28rpx;

		text {
			margin-left: 20rpx;
			font-size: 40rpx;
			color: #ff2917;
			font-weight: bold;
		}
	}

	.submit-btn {
		border-radius: 10rpx;
		width: 300rpx;
		height: 90rpx;
		color: #fff;
		font-size: 28rpx;
	}

	.check-box,
	.uncheck-box {
		width: 40rpx;
		height: 40rpx;
		border-radius: 10rpx;
	}

	.uncheck-box {
		border: #cdcfd0 solid 1px;
	}

	.scroll-box-r {
		width: 550rpx;
		height: 100%;
		// height: calc(100vh - 150rpx);
	}

	.scroll-box-s {
		width: 100%;
		height: 100%;
	}

	.goods-img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
	}

	.goods-info {
		width: calc(100% - 140rpx);
	}

	.changjia {
		font-size: 24rpx;
		line-height: 40rpx;
		color: #9d9fa1;
	}

	.price {
		font-size: 32rpx;
		color: #fc1f10;
		font-weight: bold;
	}

	.add-box,
	.add-box-minus {
		width: 50rpx;
		height: 50rpx;
		border-radius: 10rpx;
	}

	.add-box-minus {
		border: #00b6b2 solid 1px;
		background: #fff;
	}

	.goods-num {
		width: 120rpx;
		font-size: 28rpx;
		text-align: center;
	}

	.search-box {
		padding: 32rpx 36rpx;
		background: #fff;
		border-bottom: #f1f1f1 solid 1px;


		.search-info {
			width: 100%;
			height: 70rpx;
			border: #00b6b2 solid 1px;
			border-radius: 100rpx;
			padding-left: 20rpx;

			input {
				font-size: 26rpx;
				margin-left: 10rpx;
				width: 400rpx;
			}
		}

		.search-btn {
			width: 110rpx;
			height: 50rpx;
			background: linear-gradient(to right, #01a7a1, #5acbc1);
			border-radius: 100rpx;
			font-size: 26rpx;
			color: #fff;
			margin-right: 10rpx;
		}
	}
</style>